
<title>用户管理</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>平台管理</cite></a>
        <a><cite>用户管理</cite></a>
    </div>
</div>


<div id="user-app" class="layui-fluid" v-cloak>
    <div class="layui-inline">
        <div class="layui-btn-group">
            <button :class="{'layui-btn layui-btn-sm layui-btn-disabled':Disabled(),'layui-btn layui-btn-sm':!Disabled()}" v-bind:disabled="Disabled()" v-on:click="Open('userInfo','修改',SelectedModel)"><i class="fa fa-pencil-square-o"></i>  修改</button>
            <button :class="{'layui-btn layui-btn-sm layui-btn-disabled':Disabled(),'layui-btn layui-btn-sm':!Disabled()}" v-bind:disabled="Disabled()" v-on:click="Delete"><i class="fa fa-trash-o"></i>  删除</button>
            <button class="layui-btn layui-btn-sm" v-on:click="Open('userInfo','添加')"><i class="fa fa-plus"></i>  添加</button>
            <button :class="{'layui-btn layui-btn-sm layui-btn-disabled':Disabled(),'layui-btn layui-btn-sm':!Disabled()}" v-bind:disabled="Disabled()" v-on:click="Open('userPassword','修改密码',SelectedModel)"><i class="fa fa-pencil-square-o"></i>  修改密码</button>
        </div>
        <div class="layui-inline">
            <div class="layui-input" style="height:30px;">
                <input id="txt_keyword" type="text" placeholder="名称" class="layui-block" style="width:200px;height:28px;line-height:28px;border:none;vertical-align:middle;" v-model="SearchModel.keyword">
                <button id="btn_search" type="button" class="layui-btn" v-on:click="Search" style="height:28px;line-height:28px;vertical-align:middle;"><i class="fa fa-search"></i></button>
            </div>
        </div>
    </div>
    <table id="table-cont" class="table table-hover layui-table table-cont">
        <thead>
            <tr>
                <th style="width:20px;"></th>
                <th>账号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>手机</th>
                <!--<th>部门</th>
                <th>岗位</th>-->
                <th>角色</th>
                <!--<th>商户</th>-->
                <th>邮箱</th>
                <th>微信</th>
                <th>创建时间</th>
                <th>备注</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in Models" :class="{'selected':SelectedModel == item}" v-on:click="SelectRow(item)">
                <td>{{ GetOrdinal(index) }}</td>
                <td>{{ item.UserName }}</td>
                <td>{{ item.RealName }}</td>
                <td>{{ item.Gender|Gender }}</td>
                <td>{{ item.Birthday|yyyy_mm_dd}}</td>
                <td>{{ item.MobilePhone }}</td>
                <td>{{ GetOptionTextByValue(0,item.RoleId) }}</td>
                <!--<td>{{ GetOptionTextByValue(1,item.CustomerId)}}</td>-->
                <td>{{item.Email}}</td>
                <td>{{item.WeChat}}</td>
                <td>{{ item.CreationTime|yyyy_mm_dd_hh_mm_ss }}</td>
                <td>{{ item.Description }}</td>
                <td>
                    <switchbutton v-bind:value="item.IsEnabled" v-bind:text="item.IsEnabled?'启用':'禁用'"></switchbutton>
                </td>

            </tr>
        </tbody>
        <tfoot is="ling-footer" v-bind:options="PageOptions" v-on:change="ToPage"> </tfoot>
    </table>

    <form id="user-dailog" v-show="false" class="layui-form" style="padding:20px;" v-cloak>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <input id="UserName" name="UserName" type="text" lay-verify="required" class="layui-input" placeholder="请输入账号" v-bind:readonly="EditModel!=null" v-bind:disabled="EditModel!=null" v-model="Model.UserName" />
                </div>
            </div>
            <div v-if="EditModel==null" class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input id="Password" name="Password" type="password" class="layui-input" lay-verify="pass" placeholder="请输入密码" v-model="Model.Password" /> 
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">角色</label>

                <div class="layui-input-inline">
                    <select id="user-RoleId" name="RoleId" lay-verify="required" lay-search="" lay-filter="RoleId" :value="Model.RoleId">
                        <option value="">直接选择或搜索选择</option>
                        <option v-for="pitem in OptionItems[0]" v-bind:value="pitem.Value" v-html="pitem.Text"></option>
                    </select>
                </div>
            </div>
            <!--<div class="layui-inline" v-if="ShowCust">
                <label class="layui-form-label">商户</label>

                <div class="layui-input-inline">
                    <select id="user-CustomerId" name="CustomerId" lay-search="" lay-filter="CustomerId" :value="Model.CustomerId">
                        <option value="">直接选择或搜索选择</option>
                        <option v-for="pitem in OptionItems[1]" v-bind:value="pitem.Value" v-html="pitem.Text"></option>
                    </select>
                </div>
            </div>-->

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>

                <div class="layui-input-inline">
                    <input id="RealName" name="RealName" type="text" lay-verify="required" class="layui-input" placeholder="请输入姓名" v-model="Model.RealName" />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <select id="Gender" name="Gender" lay-filter="Gender" lay-verify="required" v-model="Model.Gender">
                        <option value="">请选择</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机</label>

                <div class="layui-input-inline">
                    <input type="tel" name="MobilePhone" maxlength="11"  lay-verify="phone" autocomplete="off" placeholder="请输入手机号" v-model="Model.MobilePhone" class="layui-input" />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-inline">
                    <input type="text" name="Birthday" id="Birthday" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" :value="Model.Birthday|yyyy_mm_dd" />
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">微信</label>

                <div class="layui-input-inline">
                    <input id="WeChat" name="WeChat" type="text" class="layui-input" v-model="Model.WeChat" />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="Email" lay-verify="email" autocomplete="off" class="layui-input" v-model="Model.Email" />
                </div>
            </div>

        </div>

        
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea id="Description" name="Description" class="layui-textarea" style="width: 514px;resize:none;" v-model="Model.Description"></textarea>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">选项</label>
                <div class="layui-input-inline">
                    <switchbutton v-bind:value="Model.IsEnabled" v-on:change="ChangeStatus" v-bind:text="Model.IsEnabled?'启用':'禁用'"></switchbutton>
                </div>
            </div>
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
            </div>
        </div>
    </form>

    <form id="user-password" v-show="false" class="layui-form" style="padding:20px;" v-cloak>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户</label>
                <div class="layui-input-inline">
                    <input name="UserName" readonly="readonly" type="text" class="layui-input" v-bind:disabled="EditModel!=null" v-model="Model.UserName" />
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input name="RealName" readonly="readonly" type="text" class="layui-input" v-bind:disabled="EditModel!=null" v-model="Model.RealName" />
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input name="Password" type="password" class="layui-input" lay-verify="pass" placeholder="请输入密码" v-model="Model.Password" />
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="revisePwd">保存</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['admin', 'laypage', 'table', 'form', 'laydate', 'ling'], function () {
        var $ = layui.$;
        var table = layui.table;
        var laypage = layui.laypage;
        var form = layui.form;
        var ling = layui.ling;
        var laydate = layui.laydate;
        var dialogIndex;
        var mixins = {
            data: { ShowCust: false }
        };
        var app = $('#user-app').Grid({
            SearchUrl: "/SystemManage/User/GetModels"
            , DeleteUrl: "/SystemManage/User/Delete"
            , EditUrl: "/SystemManage/User/Update"
            , AddUrl: "/SystemManage/User/Add"
            , OptionsUrl: ["/SystemManage/User/GetAllRoles"] //级联数据, "/CRM/Customers/GetDropdownList" 
            , DialogConfig: function (key) {
                switch (key) {
                    case "userPassword":
                        return {
                            title: app.Title,
                            area: ['404px'], //宽高
                            content: $("#user-password"),
                            opened: function (index) {
                                dialogIndex = index;
                            }
                        };
                    default:
                        return {
                            title: app.Title,
                            area: ['704px'], //宽高
                            content: $("#user-dailog"),
                            opened: function (index) {
                                dialogIndex = index;
                                app.ShowCust = false;
                                if (app.Model && app.Model.RoleId == '9da680ca2e534b82ae9510216206b69e')
                                    app.ShowCust = true;
                               
                            }
                        }
                }
            }
            , updated: function () {
                form.render();
            }

        }, mixins);

        //构造和监听日期选择
        laydate.render({
            elem: '#Birthday'
            , done: function (value, date) {//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                if (app.Model)
                    app.Model[this.elem[0].name] = value;
            }
        });

        //监听 下拉选择
        form.on('select', function (data) {
            if (app.Model)
                app.Model[data.elem.name] = data.value;
        });
        form.on('select(RoleId)', function (data) {
             
            if (app.Model) {
                if (data.value != '9da680ca2e534b82ae9510216206b69e') {
                    //app.Model.CustomerId = null;
                    app.ShowCust = false;
                }
                else
                    app.ShowCust = true;
            }
        });
        //自定义验证规则
        form.verify({
            verifyName: function (value) {
                if (value.length < 2) {
                    return '至少得2个字符啊';
                }
            }
            , pass: [/^(?=.*\d)(?=.*[a-z]).{8,}$/, '密码至少8位,数字和字母的组合'] 
        });

        ////监听提交
        form.on('submit(save)', function (data) {
            var code = app.Save();
            if (code == 0 && dialogIndex)
                layer.close(dialogIndex);
            return false;
        });
        ////监听提交
        form.on('submit(revisePwd)', function (data) {
            var model = {
                userId: app.Model.Id, newPassword: app.Model.Password,
            }
            ling.post("/SystemManage/User/RevisePassword", model, function (result) {
                if (result.code == 0) {
                    app.OnSearch();
                    ling.msg(result.msg || '更新成功', null, 6, 1000);
                    if (dialogIndex)
                        layer.close(dialogIndex);
                }
                else {
                    core.alert(result.msg);
                }
            });

            return false;
        });

    });
</script>-->
